<template>
  <div class="page">
    <nav-bar title="工地数据" theme="white" />
    <div class="card" style="margin-top: 54px">
      <div class="card-item">
        <div class="card-item-title">工地概况</div>
        <div class="card-item-body">
          <div class="card-item-body-detail">
            <div class="left">
              <div class="radio">
                <span>工地总数</span>
                <span>{{ countList.find(item => item.name === '总数').value }}</span>
              </div>
            </div>
            <div class="right">
              <template v-for="(item, index) in countList">
                <div v-if="item.name !== '总数'" class="right-item" :key="index">
                  <div class="text-green">{{ item.proportion }}%</div>
                  <div>{{ item.name }}： {{ item.value }}</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="card-item">
        <div class="card-item-title">工地预警分析</div>
        <div class="card-item-body">
          <Bing :chartData="chartData"></Bing>
        </div>
      </div>
      <div class="card-item">
        <div class="card-item-title">
          <p>工地联系人列表</p>
        </div>
        <div class="card-item-body table">
          <van-row class="table-header">
            <van-col :span="8">项目名称</van-col>
            <van-col :span="8">负责人</van-col>
            <van-col :span="8">联系方式</van-col>
          </van-row>
          <van-row class="table-body-item" v-for="(item, index) in tableData" :key="index">
            <van-col :span="8">
              <p>{{ item.projectName }}</p>
            </van-col>
            <van-col :span="8">
              <p>{{ item.principal }}</p>
            </van-col>
            <van-col :span="8">
              <p>{{ item.phone }}</p>
            </van-col>
          </van-row>
          <van-pagination
            v-model="formParams.pageNumber"
            :total-items="formParams.totalSize"
            :items-per-page="formParams.pageSize"
            @change="pageChange"
          >
            <template #prev-text>
              <van-icon name="arrow-left" />
            </template>
            <template #next-text>
              <van-icon name="arrow" />
            </template>
            <template #page="{ text }">{{ text }}</template>
          </van-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Bing } from '@/components/Chart'
import siteApi from '@/api/siteApi'

export default {
  components: {
    Bing
  },
  data() {
    return {
      countList: [
        {
          name: '施工中',
          key: 'constructionTotal',
          proportionKey: 'constructionPCT',
          value: '',
          proportion: ''
        },
        {
          name: '已停工',
          key: 'stopworkTotal',
          proportionKey: 'stopworkPCT',
          value: '',
          proportion: ''
        },
        {
          name: '已完工',
          key: 'finishedTotal',
          proportionKey: 'finishedPCT',
          value: '',
          proportion: ''
        },
        {
          name: '总数',
          key: 'sum',
          value: '',
          proportion: ''
        }
      ],
      chartData: [],
      tableData: [],
      formParams: {
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        totalSize: 0
      }
    }
  },
  created() {
    this.queryChartData()
    this.queryCountData()
    this.queryListData()
  },
  methods: {
    queryChartData() {
      siteApi.Api.queryChart().then(res => {
        res.data.data.forEach(item => {
          if (item.regionName !== '总数') {
            this.chartData.push({
              name: item.regionName,
              value: item.num
            })
          }
        })
      })
    },
    queryCountData() {
      siteApi.Api.queryCount().then(res => {
        const listData = res.data.data
        for (const listDataKey in listData) {
          this.countList.forEach(item => {
            if (item.key === listDataKey) {
              item.value = listData[listDataKey]
            }
            if (item.proportionKey === listDataKey) {
              item.proportion = listData[listDataKey]
            }
          })
        }
      })
    },
    queryListData() {
      this.formParams.recordSize = this.formParams.pageSize * (this.formParams.pageNumber - 1)
      siteApi.Api.queryList({
        limit: this.formParams.pageSize,
        start: this.formParams.recordSize
      }).then(res => {
        this.tableData = res.data.data
        this.formParams.totalSize = res.data.total
        console.log(res)
      })
    },
    pageChange() {
      this.queryListData()
    }
  }
}
</script>
<style lang="less" scoped>
// @import '~@/assets/style/routine/index.less';
//@import './style/index.less';

.card {
  padding: 0 20px;

  &-item {
    margin-bottom: 30px;

    &-title {
      font-size: 34px;
      border-left: 20px solid #26c9c9;
      padding-left: 20px;
      margin: 30px 0;
    }

    &-body {
      &-detail {
        display: flex;
        .left {
          margin-left: 30px;
          width: 180px;
          height: 180px;
          border-radius: 100%;
          border: 1px solid #1bcec5;
          position: relative;
          text-align: center;
          display: flex;

          .radio {
            margin: 5px;
            width: 170px;
            height: 170px;
            line-height: 150px;
            border-radius: 100%;
            background: #1bcec5;
            position: relative;
            color: #fff;

            span:nth-child(1) {
              display: block;
              height: 30px;
              font-size: 24px;
              margin: 4px 0;
              font-weight: bold;
            }

            span:nth-child(2) {
              display: block;
              height: 40px;
              font-size: 36px;
              font-weight: bold;
            }
          }
        }

        .right {
          display: flex;
          flex-wrap: wrap;
          margin-left: 50px;

          &-item {
            width: 50%;

            .text-green {
              color: #1bcec5;
            }

            .text-blue {
              color: #5b8ff9;
            }
          }
        }
      }
      &.table {
        .table-header {
          height: 100px;
          line-height: 100px;
          background-color: #e28556;
          font-size: 30px;
          padding: 0 10px;
          color: #fff;
        }

        .table-body-item {
          height: 100px;
          line-height: 100px;
          padding: 0 10px;
          font-size: 30px;

          p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          &:nth-child(2n + 1) {
            background-color: #f3f3f3;
          }

          .operation {
            color: #37c2bb;
          }
        }
        .van-pagination {
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
